<template>
    <div class="main">
        <div class="up">
             <v-chart :option="line" autoresize />
        </div>
        <div class="down">
            <v-chart :option="bar2" autoresize/>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { color } from 'echarts';
import { ref } from 'vue';
export default{
    setup(){
        const line=ref({})
        const type_list=ref([])
        const type_count=ref([])
        axios.get("http://127.0.0.1:8000/typecount/").then(ret=>{
            type_list.value=ret.data['唐诗类别']
            type_count.value=ret.data['数量']
            
        }).catch(error=>{
            console.error("error")
        })
        line.value = {
            xAxis: {
                axisLabel: {
                    textStyle: {
                        color:'#FF0000'
                    }
                },
                type: 'category',
                data: type_list
            },
            yAxis: {
                axisLabel: {
                    textStyle: {
                        color: '#FF0000' // 设置 y 轴标签字体颜色为红色
                    },
                },
                
                type: 'value'
            },
            series: [
                {
                data: type_count,
                type: 'line',
                lineStyle: {
                    color: '#FF0000' // 设置折线颜色为红色 
                },
                smooth: true
                }
            ]
        };
        const author_list=ref([])
        const author_count=ref([])
        axios.get("http://127.0.0.1:8000/top10/").then(ret=>{
            author_list.value=ret.data['作者']
            author_count.value=ret.data['数量']
            // console.log(author_list.value)
        }).catch(error=>{
            console.error("error")
        })
        const bar2=ref({})
        bar2.value={
            xAxis: {
                axisLabel: {
                    textStyle: {
                        color:'#FF0000'
                    }
                },
                type: 'category',
                data: author_list
            },
            yAxis: {
                axisLabel: {
                    textStyle: {
                        color: '#FF0000' // 设置 y 轴标签字体颜色为红色
                    },
                },
                type: 'value'
            },
            series: [
                {
                    data: author_count,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: '#FF0000'
                    }
                    
                }
            ]
        }
        return{
            bar2,
            line
        }
    },
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.up{
    max-height: 325.13px;
    flex-grow: 1;
    /* background-color: aqua; */
}
.down{
    max-height: 325.13px;
    flex-grow: 1;
    /* background-color: aquamarine; */
}

</style>